<template>
  <a-modal v-model="dialog" :close-on-click-modal="false" title="用户选择"  top="5vh" width="70%">

    <a-card style="margin-bottom:8px;height: 65px;margin-top:-10px">
    <a-form layout="inline" @keyup.enter.native="searchQuery" style="margin-top: -10px">
      <a-row :gutter="24">
        <a-col :md="5" :sm="3">
          <a-form-item label="账户" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}">
            <a-input placeholder="请输入账户" v-model="queryParam.account"></a-input>
          </a-form-item>
        </a-col>
        <a-col :md="5" :sm="3">
          <a-form-item label="昵称" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}">
            <a-input placeholder="请输入昵称" v-model="queryParam.name"></a-input>
          </a-form-item>
        </a-col>
        <span style="overflow: hidden;">
            <a-col :md="6" :sm="24">
              <a-button type="primary" @click="searchQuery">查询</a-button>
              <a-button style="margin-left: 8px" @click="searchReset">重置</a-button>
            </a-col>
          </span>
      </a-row>
    </a-form>
    </a-card>


    <!--表格渲染-->
    <a-table ref="table" size="small"  :bordered="true" :pagination="pagination"  rowKey="id" :columns="columns" :dataSource="data" :rowSelection="rowSelection"  @change="getData">
    </a-table>

    <div slot="footer" class="dialog-footer">
      <a-button type="text" @click="cancel">取消</a-button>
      <a-button type="primary" @click="doSubmit">确认</a-button>
    </div>

  </a-modal>
</template>

<script>

  export default {
    name: 'UserSelect',
    props: {},
    data() {
      return {
        selectedRows: [],
        selectedKeys:[],
        queryParam:{
          account:'',
          name:''
        },
        pagination: {
          current: 1,
          pageSize: 10,
          pageSizeOptions: ['10', '20', '30'],
          showTotal: (total, range) => {
            return range[0] + '-' + range[1] + ' 共' + total + '条'
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0
        },
        dialog: false,
        multiple: true,
        columns: [
          {
            title: '账户',
            dataIndex: 'id'
          },
          {
            title: '昵称',
            dataIndex: 'firstName'
          }
        ],
        data: [{
          id: '1',
          firstName: '张三'
        }, {
          id: '2',
          firstName: '李四'
        }, {
          id: '3',
          firstName: '王二'
        }]
      }
    },
    computed: {
      rowSelection() {
        return {
          hideDefaultSelections: true,
          selectedRowKeys:this.selectedKeys,
          type: this.multiple ? 'checkbox' : 'radio',
          onChange: (selectedRowKeys, selectedRows) => {
            this.selectedRows = selectedRows
            this.selectedKeys = selectedRowKeys
          }
        };
      },
    },
    created() {
    },
    methods: {
      show(){
        this.getData()
        this.dialog=true;
      },
      cancel() {
        this.selectedRows = []
        this.dialog = false
      },
      getData(pagination, filters, sorter) {
        if(pagination)
        {
          this.pagination = pagination;
        }
        let param = Object.assign({}, this.queryParam, this.sorter ,this.filters);
        param.page = this.pagination.current;
        param.rows = this.pagination.pageSize;
        this.http.get(this, {
          url: this.api.process.userList,
          data:param,
          success: function (me, data) {
            me.data=data.rows
            me.pagination.total=data.total
          }
        })
      },
      searchQuery(){
        this.getData()
      },
      searchReset(){
        this.pagination.current = 1;
        this.queryParam = {}
        this.getData();
      },
      doSubmit() {
        if (this.multiple == false && this.selectedRows.length > 1) {
          this.$message.error('你最多只能选择一个用户')
          return
        }
        this.$emit('callback', this.selectedRows,this.selectedKeys)
        this.cancel()
      }
    }
  }
</script>

<style scoped>

</style>
